<!--
 * @Author: caozaihui
 * @Date: 2024-06-21 09:36:08
 * @LastEditors: czh 2119294696@qq.com
 * @LastEditTime: 2024-06-29 21:41:25
 * @FilePath: \YMU_forum_vue\src\views\Home\components\left\HomeLeft.vue
-->
<script setup>
import ArticleCardMini from '@/components/article/ArticleCardMini.vue';
import { ElNotification, ElMessage } from 'element-plus'
import { ref, onMounted, onUnmounted, watchEffect } from 'vue'
import { useRouter } from 'vue-router';
import {useAccountStore} from '@/stores/useAccountStore'
import { getUserArticleList } from '@/apis/user';

const useAccount = useAccountStore();
const code = ref(-1);
const articleList = ref([]);

//跳转登录页
const router = useRouter();
const createArticle = () => {
    if (code.value == 0) {
        router.push({
            path: '/editor',
            query: {
                modify: 0
            }
        })
    } else {
        ElNotification({
            title: 'Error',
            message: '请先登录',
            type: 'error',
        })
    }
}

// 引用需要固定的元素  
const stickyElement = ref(null);
// 滚动距离阈值，达到这个距离后元素固定  
const threshold = 450;
// 是否应该固定的标志  
const isSticky = ref(false);
const stickywidth = ref(0);
// 监听滚动事件  
function handleScroll() {
    const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
    const rect = stickyElement.value.getBoundingClientRect();
    // 当滚动距离大于阈值，并且元素在视口内时，设置固定  
    if (window.innerWidth > 800) {
        if (scrollTop >= threshold ) {
            isSticky.value = true;
        } else {
            isSticky.value = false;
        }
    }

}
// 组件挂载后添加滚动事件监听器  
onMounted(() => {
    window.addEventListener('scroll', handleScroll);
    if (window.innerWidth > 800) {
        stickywidth.value = '300px'
    } else {
        stickywidth.value = '100%'
    }
    if(localStorage.getItem("account")!=undefined){
        getUserArticleList().then(res => {
        if (res.code == 0) {
            articleList.value = res.data.pageInfo.list;
            code.value = 0;
        } else {
            ElMessage.error(res.msg);
        }
    });
    }
    
});
// 组件卸载时移除滚动事件监听器  
onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});
// 如果你想在组件创建时立即处理一次滚动位置（可选）  
watchEffect(() => {
    // handleScroll();  

});  
</script>

<template>
    <div ref="stickyElement" style="height: 100%;" :class="{ 'fixed-position': isSticky }"
        :style="{  width: stickywidth }">
        <div class="left_content">
            <div class="left_content_inner">
                <div style="height: 30px;"></div>
                <el-row>
                    <el-col :span="16">
                        <el-text class="title">你的最近发布</el-text>
                    </el-col>
                    <el-col class="row" :span="8">
                        <el-button type="success" plain @click="createArticle">New+</el-button>
                    </el-col>
                </el-row>
                <div style="height: 10px;"></div>

                <div>
                    <div style="height: 20px;"></div>
                    <div style="margin-left: 40px;">
                        <ArticleCardMini v-if="code == 0" :articleList="articleList"></ArticleCardMini>
                        <el-text class="text" v-else>登录查看你的文章</el-text>
                    </div>
                </div>
                <div style="height: 20px;"></div>
                <el-text class="title">相关内容</el-text>
                <el-card shadow="hover" class="card">
                    <h3>欢迎到访 这里是自由的论坛</h3>
                    <h4>海内存知己，天涯若比邻</h4>
                </el-card>
            </div>
        </div>
    </div>


</template>

<style scoped>
.fixed-position {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;

}

.left_content {
    position: relative;
    width: 100%;
    height: 100%;
    padding: 10px;
    margin: auto;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    background-color: transparent;
    transition: top 0.3s ease;
    /* 平滑过渡效果 */
}

.left_content_inner {
    position: relative;
    color: #fff;
    z-index: 10;
    line-height: 1.5;
}

.left_content::after {
    position: absolute;
    content: "";
    background-image: url("https://images.unsplash.com/photo-1440688807730-73e4e2169fb8?dpr=1&auto=format&fit=crop&w=1500&h=1001&q=80&cs=tinysrgb&crop=");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    background-position: top;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    filter: blur(10px);
}

.row {
    display: flex;
    align-items: center;
    justify-content: center;
}

.title {
    font-size: 18px;
    font-weight: bolder;
    color: #ffffff;
    padding-left: 25px;
}

.card {
    width: 100%;
}

.text {
    margin-left: 25px;
    width: 100vw;
}
</style>